<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <title>Overlay tag example</title>
    <gui:resources components="['overlay']"/>
    <style>
    .pink {
        background-color: pink;
        color: red;
        border: solid 1px red;
    }
    </style>
</head>

<body>

    <h1>Overlay Demo</h1>

    <gui:overlay xy="[100,200]" class='pink' width="500px" visible='false'>
    Curabitur ornare sodales sapien in tristique. Donec ut orci viverra ipsum condimentum aliquam at eu arcu. Cras eu placerat purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod interdum lacus, eu fermentum lacus cursus sit amet. Vestibulum vitae odio odio. Ut purus tortor, tincidunt sit amet iaculis porttitor, pretium sed urna. Proin placerat dui et sapien semper tincidunt. Curabitur euismod justo eu lorem fermentum aliquam. Phasellus ligula mi, aliquam sit amet aliquam eget, pretium sit amet urna. Donec interdum mauris non mauris volutpat vitae blandit felis dictum. Proin eu pretium eros. Duis suscipit hendrerit nisi ac bibendum. Donec turpis magna, pretium sed gravida et, ornare vel lacus. Donec hendrerit tellus quis dolor pharetra ullamcorper. In sit amet luctus augue. Mauris et sapien eget metus consectetur blandit quis quis nisi. Nunc interdum sollicitudin mi vel fermentum.
    </gui:overlay>
    
</body>
</html>